const { resolve,join } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const glob = require('glob')
const PATH = {src:join(__dirname,'src')}
const PurgecssPlugin = require('purgecss-webpack-plugin')
const  MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {

    entry:['./src/js/main.js','./src/index.html'], //入口文件
    output:{ //出口文件
        filename:'main.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[

            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}, //编译CSS的loader
            {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},
            {test:/\.(png|jpg|gif)$/,loader:'url-loader',
                options: {
                        limit:10000,
                        publicPath: './img/',
                        outputPath: 'img/',
                        name:'[name][hash:7].[ext]'
                    }
                    },//处理和打包图片文件的 loader
            {exclude:/\.(css|js|png|jpg|gif|html|scss|sass)$/,loader:'file-loader', //处理和非图片文件的比如说字体和其他文件 loader
                options:{
                    name:'[name][hash:7].[ext]',
                    outputPath:'./font/',
                    publicPath:'./src/'

                }
            },
            {test:/\.html$/,loader:'html-loader'} //编译HTML的loader
        ]
    },
    mode:'development', //配置开发模式
    plugins:[
        new HtmlWebpackPlugin({//配置HTML插件输出
            template:'./src/index.html',
            filename: './index.html'

        }),
        new HtmlWebpackPlugin({ //配置HTML插件输出
            template: "./src/play.html",
            filename: "./play.html"
        }),
        new PurgecssPlugin({ //配置CSS的树摇功能
            paths:glob.sync(`${PATH.src}/**/*`,{nodir:true})
        }),
        new MiniCssExtractPlugin({ //配置要单独抽出的css的名称
            filename:'./index.css'
        })

    ],
    target:'web', //自动刷新开发服务器
    devServer: { //配置开发服务器
        port:3001,
        hot:true
    }
}